<template>
  <div v-if="props.mode === 'detail'">
    <span>{{ modelValue }}</span>
    <span class="suffix" v-if="props.config.unit">{{ props.config.unit }}</span>
  </div>
  <el-input v-else v-bind="defaultAttr" v-model="modelValue" @change="handleChange" style="width: 100%">
    <template #suffix v-if="props.config.unit">
      <span>{{ props.config.unit }}</span>
    </template>
  </el-input>
</template>

<script setup>
// v-model值
const modelValue = defineModel()

// 输入框配置项
const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
  mode: {
    // 'edit' | 'detail' | 'add'
    type: String,
    default: 'detail',
  },
})

const defaultAttr = computed(() => {
  // 设置默认绑定值
  let { attrs = {} } = props.config
  // 获取默认项
  attrs['placeholder'] = attrs?.placeholder || `请输入${props.config.label}`

  // 判断禁用
  attrs['disabled'] = props.config?.disabled || false
  return { ...attrs }
})

// 事件
const emits = defineEmits(['change'])
const handleChange = (value) => {
  if (props.config.event) {
    emits('change', value)
  }
}
</script>

<style lang="scss" scoped>
.suffix {
  color: var(--el-input-icon-color, var(--el-text-color-placeholder));
  transition: all var(--el-transition-duration);
  pointer-events: none;
  margin-left: 8px;
}
</style>
